<template>
	<Content :title="option.item ?  '编辑维修申请' : '申请维修'">
		<view class="from-box" :style="{ 'padding-bottom': '160rpx' }">
			<view class="content content-bottom">
				<u-form labelPosition="left" :model="model" labelWidth="120" labelAlign="left" :rules="rules"
					ref="uForm">
					<u-form-item borderBottom label="设备编号" prop="deviceNo" required>
						<uni-data-select v-model="model.deviceNo" :localdata="numberList" showInput
							@inputChange="getNumberList" @change="changeDeviceMId"
							placeholder="请查询设备编号"></uni-data-select>
					</u-form-item>

					<u-form-item borderBottom label="设备流水号" prop="deviceMId" required>
						<u-input label v-model="model.deviceMId" placeholder="请填写设备流水号" disabled></u-input>
					</u-form-item>

					<u-form-item borderBottom label="设备名称" prop="deviceName" required>
						<u-input label v-model="model.deviceName" placeholder="请填写设备名称" disabled></u-input>
					</u-form-item>

					<u-form-item borderBottom label="故障时间" prop="faultTime" required>
						<MyDate mode="datetime" v-model="model.faultTime" placeholder="请选择故障时间"></MyDate>
					</u-form-item>

					<u-form-item borderBottom label="报修时间" prop="maintainApplyTime" required>
						<MyDate mode="datetime" v-model="model.maintainApplyTime" placeholder="请选择报修时间"></MyDate>
					</u-form-item>

					<u-form-item borderBottom label="报修人" prop="repairApplicant">
						<u-input label v-model="model.repairApplicant" placeholder="请填写报修人" clearable
							disabled></u-input>
					</u-form-item>

					<u-form-item borderBottom label="报修电话" prop="maintainApplyPhone">
						<u-input v-model="model.maintainApplyPhone" placeholder="请填写报修电话" type="number"
							clearable></u-input>
					</u-form-item>

					<u-form-item borderBottom label="维修迫切程度" prop="maintainGrade" required>
						<uni-data-select v-model="model.maintainGrade" :localdata="levels"
							placeholder="请选择维修迫切程度"></uni-data-select>
					</u-form-item>

					<u-form-item borderBottom label="故障现象" prop="faultMessage" required>
						<uni-data-select v-model="model.faultMessage" :localdata="faultMessageList"
							placeholder="请选择故障现象"></uni-data-select>
					</u-form-item>

					<u-form-item borderBottom label="故障代码" prop="faultTypeCode">
						<uni-data-select v-model="model.faultTypeCode" :localdata="faultCodeList"
							placeholder="请选择故障代码"></uni-data-select>
					</u-form-item>

					<u-form-item borderBottom label="是否影响生产" prop="affectProductionFlag">
						<uni-data-select v-model="model.affectProductionFlag" :localdata="effects"
							placeholder="请选择"></uni-data-select>
					</u-form-item>

					<u-form-item borderBottom label="故障详情" prop="faultDetail">
						<!-- <uni-data-select v-model="model.faultDetail" style="width:100%" :localdata="faultResList"
							placeholder="请选择故障详情"></uni-data-select> -->
						<u-input v-model="model.faultDetail" placeholder="请填写故障详情" clearable></u-input>
					</u-form-item>
					<u-form-item borderBottom label="上传附件" prop="attachmentDTOs">
						<MyUpload v-model="model.attachmentDTOs" multiple :maxCount="5"></MyUpload>
					</u-form-item>

					<view class="btn-v">
						<view class="but-box">
							<u-button class="btn" text="取消" @click="back"></u-button>
							<u-button class="btn" type="primary" @click="submit" text="确认提交"></u-button>
						</view>
					</view>
				</u-form>
			</view>
		</view>
	</Content>
</template>

<script>
	import Content from "@/components/content/index.vue";
	import MyDate from "@/components/myDate.vue";
	import {
		getPageData,
		getUserInfo
	} from "@/store/user";
	import fetch from "@/utils/fetch";
	import MyUpload from "@/components/myUpload";
	export default {
		components: {
			Content,
			MyDate,
			MyUpload,
		},
		data() {
			return {
				option: {},
				numberList: [],
				levels: [{
						text: "特急",
						value: 2
					},
					{
						text: "紧急",
						value: 1
					},
					{
						text: "一般",
						value: 0
					},
				],
				faultMessageList: [],
				faultCodeList: [],
				faultResList: [],
				effects: [{
						text: "影响生产停机",
						value: 2
					},
					{
						text: "影响生产未停机",
						value: 1
					},
					{
						text: "不影响生产",
						value: 0
					},
				],
				model: {
					deviceMId: "",
					deviceNo: "",
					deviceName: "",
					faultTime: this.$dayjs().format('YYYY-MM-DD HH:mm:ss'),
					maintainApplyTime: this.$dayjs().format('YYYY-MM-DD HH:mm:ss'),
					repairApplicant: getUserInfo().realname,
					maintainApplyPhone: getUserInfo().phone,
					maintainGrade: "",
					faultMessage: "",
					faultTypeCode: "",
					affectProductionFlag: "",
					attachmentDTOs: [],
					faultDetail: "",
				},
				rules: {
					deviceNo: {
						type: "string",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					},
					deviceName: {
						type: "string",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					},
					faultTime: {
						type: "string",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					},
					maintainApplyTime: {
						type: "string",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					},
					maintainGrade: {
						type: "number",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					},
					faultMessage: {
						type: "string",
						required: true,
						message: "请填写",
						trigger: ["change", "blur"],
					}
				},
			};
		},
		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			this.option = option;
			this.getFaultResList();
			if (option.deviceNo) {
				this.model.deviceNo = option.deviceNo
				this.getNumberList(this.model.deviceNo);
				setTimeout(() => {
					this.changeDeviceMId(option.deviceNo)
				}, 500)
			}
			if (option.item) {
				const item = this.option.item = JSON.parse(option.item);
				this.model = {
					deviceMId: item.deviceMId,
					deviceNo: item.deviceNo,
					deviceName: item.deviceName,
					faultTime: item.faultTime,
					maintainApplyTime: item.maintainApplyTime,
					repairApplicant: getUserInfo().realname,
					maintainApplyPhone: item.maintainApplyPhone,
					maintainGrade: item.maintainGrade,
					faultMessage: item.faultMessage,
					faultTypeCode: item.faultTypeCode,
					affectProductionFlag: item.affectProductionFlag,
					faultDetail: item.faultDetail,
				};
				if (item.attachmentDTOs1 && item.attachmentDTOs1.length !== 0) {
					const arr = item.attachmentDTOs1.map(item => {
						return {
							...item,
							name: item.fileName,
							url: item.filePath,
						}
					});
					this.$nextTick(() => {
						this.$set(this.model, 'attachmentDTOs', arr);
					});
				};
				this.getNumberList(this.model.deviceNo);
			}
			this.getFaultMessageList();
		},
		onReady: function() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			uploadFile() {
				this.$refs.myUploaderFiles.chooseImages();
			},
			getNumberList(query) {
				fetch("post", "/dms/device/page", {
					pageSize: 100,
					pageNum: 1,
					deviceMId: "",
					deviceNo: query.split('-')[0],
					assetsNo: "",
					orgCode: ""
				}).then((res) => {
					this.numberList = (res.data.records || []).map(item => {
						if (item.deviceStatus === '3') {
							item.disabled = true
						}
						item.item = item;
						item.text = item.deviceNo + '-' + item
							.deviceName;
						item.value = item.deviceNo;
						return item;
					});
				});
			},
			changeDeviceMId(value) {
				const obj = this.numberList.find(item => item.deviceNo === value);
				this.model.deviceNo = obj.item.deviceNo;
				this.model.deviceName = obj.item.deviceName;
				this.model.deviceMId = obj.item.deviceMId;
				this.getfaultCodeList(obj.item.id);
			},
			getFaultMessageList() {
				fetch('post', '/dms/dict/list', {
					code: "故障现象",
					pageSize: 999,
					pageNo: 1,
				}).then(res => {
					this.faultMessageList = (res.data.list || []).map(item => {
						return {
							text: item.value,
							value: item.value
						};
					});
				});
			},
			getFaultResList() {
				fetch('get', "/dms/faultCategory/dictList?name=故障详情").then(res => {
					this.faultResList = (res.data || []).map(item => {
						return {
							text: item.value,
							value: item.value
						};
					});
				});
			},
			getfaultCodeList(deviceId) {
				fetch('get', '/dms/devMaintainKb/selectFaultTypeCodeByDeviceId?deviceId', {
					deviceId
				}).then(res => {
					this.faultCodeList = res.data.map(item => {
						return {
							item: item,
							text: item.faultTypeCode,
							value: item.faultTypeCode,
						}
					});
				})
			},
			submit() {
				const that = this;

				that.$loading.open();
				that.$refs.uForm.validate().then((valid) => {
					if (valid) {
						//故障时间应小于等于报修时间
						//TODO ...

						that.$loading.open();
						console.log("that.model", that.model);
						let data = {
							...that.model,
							attachmentDTOs: that.model.attachmentDTOs?.map(item => {
								const filePath = '/data/materialtrack/static' + item.url.split(
									'/static')[1]
								return {
									attachmentType: 1,
									fileName: item.name || new Date().getTime(),
									filePath: filePath,
									fileUrl: item.url
								}
							})
						};
						let url = '/dms/deviceMaintenanceWorkOrder/add';
						if (this.option.item) {
							data.id = this.option.item.id;
							url = '/dms/deviceMaintenanceWorkOrder/edit';
						}
						fetch("get", `/dms/workOrder/checkDeviceInRepair?deviceMId=${data.deviceMId}`).then(
							res => {
								if (res.data == true) {
									uni.$emit("openToast", {
										type: "error",
										title: "已存在未完工的维修单，无法继续报修。",
										complete() {
											setTimeout(() => {
												uni.navigateBack({
													delta: 1,
												});
											}, 1000);
										},
									});
									return;
								} else {
									fetch("post", url, data).then((data) => {
										uni.$emit("openToast", {
											type: "success",
											title: "申请成功",
											complete() {
												setTimeout(() => {
													uni.navigateBack({
														delta: 1,
													});
												}, 1000);
											},
										});
									});
								}
							})
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.from-box {
		padding: 20rpx;
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;

		/deep/ .u-form-item__body__left__content__label {
			margin-left: 20rpx;
		}

		// /deep/ .u-form-item__body__right__content__slot{
		// 	overflow: hidden !important;
		// }
		// /deep/ .u-form-item__body__right{
		// 	overflow: hidden !important;
		// }
		// /deep/ .uni-select {
		//     border: none;
		//     border-bottom: none;
		//     line-height: 26px;
		//     height: 24px !important;
		//     padding-left: 0;
		// }

		/deep/ .uni-select__input-placeholder {
			color: #cbc9cc !important;
			font-size: 15px !important;
		}
	}

	.content {
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 5px;
		box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
	}

	.content-bottom {
		flex: 1;
	}
</style>